<template>
	<view>
		<pageheader :setting="settingdata"></pageheader>
		<view class="phonecontent">
			<text class="phone_q">+86</text>
			<u-icon name="arrow-down" color="#000" size="28"></u-icon>
			<u-input v-model="phone" placeholder="请输入新手机号" maxlength="11" type="number" :border="false"
				class="phone_puts" />
		</view>
		<view class="app_door">
			<u-button shape="circle" type="success" :custom-style="wechatStyle" :hair-line="false" @click="toyanzheng">
				获取验证码</u-button>
		</view>
	</view>
</template>

<script>
	var _this;
	export default {
		data() {
			return {
				settingdata: {
					name: '绑定手机号',
					bgColor: '#fff',
					titleColor: '#000000',
					showNav: true,
					showTypes: 0,
					position: "phonelogin"
				},
				wechatStyle: {
					width: '590rpx',
					color: '#fff',
					background: '#38be8c'
				},
				phone: ''
			}
		},
		onLoad(e) {
			_this = this
		},
		onShow() {},
		methods: {
			toyanzheng: function() {
				if (_this.phone.length == 11) {
					uni.navigateTo({
						url: '/home/login/verify?phone=' + this.phone + '&type=2'
					})
				} else {
					uni.showToast({
						title: '请输入11位的手机号码',
						icon: 'none',
						duration: 2000
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.phonecontent {
		margin: 120rpx 64rpx 0 64rpx;
		padding: 20rpx 0;
		border-bottom: 2rpx solid #EEEEF1;
		display: flex;
		flex-direction: row;
		align-items: center;

		.phone_q {
			font-size: 28rpx;
			color: #000;
			margin-right: 30rpx;
		}

		.phone_puts {
			margin-left: 60rpx;
			flex: 1;
			font-size: 28rpx;
			color: #000;
		}
	}

	.app_door {
		width: 100%;
		padding: 0 0 95rpx 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50rpx;
	}
</style>
